<template>
    <view class="container">
        <view class="items" v-if="status == 0 || env == 'development'" @click="showAuth">
            <!-- v-if="status==0" -->
            <u-image src="/static/icon/10016.png" width="88" height="88" class="o-flex-shrink"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text">您还没有进行认证，将无法使用平台的服务</view>
                <view class="action"><text>待认证</text></view>
            </view>
        </view>
        <view class="items" v-if="status == 1"  @click="jump2underReview">
            <!--  -->
            <u-image src="/static/icon/10016.png" width="88" height="88" class="o-flex-shrink"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text">您还没有进行认证，将无法使用平台的服务</view>
                <view class="action"><text>认证中</text></view>
            </view>
        </view>
        <view class="items" v-if="status == 2">
            <u-image src="/static/icon/10016.png" width="88" height="88" class="o-flex-shrink"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text">待实地考察</view>
            </view>
        </view>
        <view class="items"  v-if="status == 3">
            <u-image src="/static/icon/10016.png" width="88" height="88" class="o-flex-shrink"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text">待平台审核</view>
            </view>
        </view>
        <view class="items" v-if="status == 4">
            <!--  -->
            <u-image src="/static/icon/10017.png" width="88" height="88" class="o-flex-shrink"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text">恭喜您,商家认证成功，欢迎使用平台服务</view>
                <view class="action"><text>认证完成!</text></view>
            </view>
        </view>

        <!-- 商户码 绑定状态 -->
        <view class="items" v-if="SHstatus == 1 || SHstatus == 2">
            <u-image src="/static/icon/10009.png" width="88" height="88" class="o-flex-shrink" v-if="SHstatus == 1"></u-image>
            <u-image src="/static/icon/10007.png" width="88" height="88" class="o-flex-shrink" v-if="SHstatus == 2"></u-image>
            <view class="u-flex u-col-center u-flex-1">
                <view class="items-text" v-if="SHstatus == 1">您正在绑定超凡云仓共创会员，请耐心等待平台审核</view>
                <view class="items-text" v-if="SHstatus == 2">恭喜您成为超凡云仓共创会员，欢迎使用平台的服务</view>
                <view class="action">{{SHstatusName}}</view>
            </view>
        </view>
        <!-- 按钮 -->
        <view class="btns">
            <u-button @click="$u.$MRouter.home.to()">返回首页</u-button>
            <u-button id="guide001" type="primary" v-if="status === 0" @click="showAuth">去认证</u-button>
            <u-button type="primary" v-if="status === 1" @click="jump2underReview">去身份识别</u-button>
            <u-button type="primary" v-if="status === 5" @click="showAuth">重新提交</u-button>
        </view>
        <view class="copyright">
            <view>Copyright2020-2030</view>
            <view>浙江超凡云仓供应链管理有限公司</view>
        </view>
        <auth-modal ref="authRef" @jump="jump2auth" v-if="loadPop"></auth-modal>
    </view>
</template>

<script lang="ts" setup>
import { ref, nextTick, computed } from 'vue';
import authModal from './authModal.vue'

const status = ref(0)
const loadPop = ref(false)
const env = ref(process.env.NODE_ENV)

/** 商户码绑定状态 0: 未绑定  1: 审核中  2: 已绑定*/
const SHstatus = ref(-1)

const SHstatusName = ref('')

const authRef = ref<any>(null)

const $u = computed(()=>{
    return uni.$u
})

const showAuth = function(){
    loadPop.value = true
    nextTick(()=>{
        authRef.value?.open();
    })
}
/** 跳转到 认证中 页面 */
const jump2underReview = function(){
    let para = JSON.stringify({
        current: 2,
        isCompany: false
    });
    uni.$u.$MRouter.authStep.to({ para });
}

const jump2auth = function(){
    uni.$u.$MRouter.authStep.to();
}
</script>

<style scoped lang="scss">
.container {
    padding-top: 20rpx;
    height: calc(100vh - 44px - var(--status-bar-height));
    box-sizing: border-box;
}

.items {
    background-color: $uni-bg-color;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-text {
        font-size: 28rpx;
        line-height: 30rpx;
        padding: 0 20rpx;
        flex: 1;
    }

    .action {
        font-size: 26rpx;

        color: #0a69ff;
        line-height: 37rpx;
        min-width: 200rpx;
        text-align: center;
    }
}
.btns{
    display: flex;
    margin-top: 40rpx;
    & > button {
        width: 40%;
    }
}
.copyright {
    width: 100%;
    font-size: 20rpx;
    line-height: 50rpx;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 60rpx;
}
</style>
